<template>
	<view class="main">
		<view class="subject">
			<text class="type" v-if="!quest.answer_c">判断题</text>
			<text class="type" v-if="quest.answer_c && quest.right_answer.length==1">选择题</text>
			<text class="type" v-if="quest.answer_c && quest.right_answer.length>1">多选题</text>
			<text v-html="subjectContent"></text>
		</view>
		<view class="images" v-if="quest.questions_image">
			<image class="img" :src="quest.questions_image" mode="widthFix"></image>
		</view>
		<view class="answer">
			<view class="item" :class="correct.indexOf('A')>-1?'true':error.indexOf('A')>-1?'false':''"
				@click="handleAnswer('A')">
				<text class="round" v-if="error.indexOf('A')>-1"><u-icon name="close" color="#fff"
						size="28"></u-icon></text>
				<text class="round" :class="multipleAnswer.indexOf('A')>-1?'selected':''" v-else>A</text>
				<text class="answer-text">{{quest.answer_a}}</text>
			</view>
			<view class="item" :class="correct.indexOf('B')>-1?'true':error.indexOf('B')>-1?'false':''"
				@click="handleAnswer('B')">
				<text class="round" v-if="error.indexOf('B')>-1"><u-icon name="close" color="#fff"
						size="28"></u-icon></text>
				<text class="round" :class="multipleAnswer.indexOf('B')>-1?'selected':''" v-else>B</text><text
					class="answer-text">{{quest.answer_b}}</text>
			</view>
			<view class="item" :class="correct.indexOf('C')>-1?'true':error.indexOf('C')>-1?'false':''"
				v-if="quest.answer_c" @click="handleAnswer('C')">
				<text class="round" v-if="error.indexOf('C')>-1"><u-icon name="close" color="#fff"
						size="28"></u-icon></text>
				<text class="round" :class="multipleAnswer.indexOf('C')>-1?'selected':''" v-else>C</text><text
					class="answer-text">{{quest.answer_c}}</text>
			</view>
			<view class="item" :class="correct.indexOf('D')>-1?'true':error.indexOf('D')>-1?'false':''"
				v-if="quest.answer_d" @click="handleAnswer('D')">
				<text class="round" v-if="error.indexOf('D')>-1"><u-icon name="close" color="#fff"
						size="28"></u-icon></text>
				<text class="round" :class="multipleAnswer.indexOf('D')>-1?'selected':''" v-else>D</text><text
					class="answer-text">{{quest.answer_d}}</text>
			</view>

		</view>
		<view class="other">
			<view class="item" @click="skill">
				<u-icon color="#646464" name="zhihu-circle-fill"></u-icon>技巧
			</view>
			<!-- 	<view class="item">
				<u-icon color="#646464" name="volume-fill"></u-icon> 语音
			</view>
			<view class="item">
				<u-icon color="#646464" name="play-circle-fill"></u-icon>视频
			</view> -->
		</view>
		<view class="skill" v-if="skillShow">
			技巧：{{quest.tech}}
		</view>

		<view class="detail" v-if="!isTrue">
			<view class="line">
				<view class="left"></view> 试题详解 <view class="left"></view>
			</view>
			<view class="standard">
				标准答案：{{explain}}
			</view>
		</view>
		<view class="confirm" @click="multiple" v-if="quest.answer_c && quest.right_answer.length>1">
			提交
		</view>
		<view class="bottom">
			<view class="item" @click="prevSubject">
				<u-icon name="arrow-left"></u-icon>上一题
			</view>
			<view class="number" style="color: #4365C6;">
				<text class="round"> <u-icon name="checkmark"></u-icon></text>{{rightNum}}
			</view>
			<view class="number" style="color:#9A2925">
				<text class="round"> <u-icon name="close"></u-icon></text>{{errorNum}}
			</view>
			<view class="item" style="min-width: 200rpx;">
				<u-icon color="#3584FA" name="grid"></u-icon>{{thisNum}}/{{count}}
			</view>
			<view class="item" @click="nextSubject">
				下一题 <u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		random,
		answerApi,
		randomNext,
		randomPrev,
		deleteRecord
	} from "@/api/index.js"
	export default {
		data() {
			return {
				skillShow: false,
				count: '',
				class: '',
				subjectContent: '',
				quest: '',
				subjectType: '',
				isTrue: true,
				explain: '',
				isAnswer: true,
				correct: '',
				error: '',
				thisNum: 1,
				multipleAnswer: '',
				resource: '',
				rightNum: 0,
				errorNum: 0,
				is_restart: "2",
				userInfo: ''
			};
		},
		onLoad(option) {
			this.class = option.class
			this.subjectType = option.subjectType
			this.resource = option.resource

		},
		mounted() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.getSubject()
		},
		methods: {
			//显示技巧
			skill() {
				this.subjectContent = this.quest.questions.replace(this.quest.red_text,
					"<span style='color: red;font-weight:600;font-size:34rpx'>" + this.quest.red_text +
					"</span>");
				this.skillShow = true
			},
			//多选提交
			multiple() {
				this.getAnswer(this.multipleAnswer)
			},
			//点击答案
			handleAnswer(answer) {
				//多选题
				if (this.quest.right_answer.length > 1) {
					if (this.multipleAnswer.indexOf(answer) > -1) {
						this.multipleAnswer = this.multipleAnswer.replace(new RegExp(answer, 'g'), '')
					} else {
						this.multipleAnswer += answer
					}
				} else {
					this.getAnswer(answer)
				}
				console.log(this.multipleAnswer)
			},
			//答题
			getAnswer(answer) {
				if (!this.isAnswer) {
					return
				}
				let data = {
					exam_id: '',
					question_id: this.quest.id,
					answer: answer.split('').join(','),
					source: this.resource
				}
				this.correct = this.quest.right_answer
				this.isAnswer = false
				answerApi(data).then(res => {
					if (res.code == 1) {
						this.isTrue = true
						this.rightNum++
						setTimeout(() => {
							this.nextSubject()
						}, 1000)
					} else {
						this.errorNum++
						if (this.quest.right_answer.length > 1) {
							for (let i in this.multipleAnswer) {
								if (this.correct.indexOf(this.multipleAnswer[i]) == -1) {
									this.error += this.multipleAnswer[i]
								}
							}
						} else {
							this.error = answer
						}

						this.isTrue = false
					}
				})
			},
			//下一题
			nextSubject() {
				if (this.thisNum == this.count) {
					if (this.thisNum == 1) {
						uni.showToast({
							title: '已经是最后一题了',
							icon: 'none'
						})
						return
					}
				}
				this.skillShow = false
				this.error = ''
				this.correct = ''
				this.multipleAnswer = ''
				this.isTrue = true
				this.isAnswer = true
				let params = {
					subject: this.subjectType,
					vip: '0',
					now_question_id: this.quest.id,
				}
				randomNext(params).then(res => {
					// if (res.code == 0) {
					// 	if (res.data && res.data.length == 0) {
					// 		wx.showModal({
					// 			title: '',
					// 			cancelText: '返回',
					// 			confirmText: '重新开始',
					// 			content: `本次练习全部做完是否重新开始？`,
					// 			success(res) {
					// 				if (res.confirm) {
					// 					that.is_restart = '1'
					// 					that.getSubject()
					// 				} else if (res.cancel) {
					// 					uni.navigateBack(-1)
					// 				}
					// 			}
					// 		})
					// 	}
					// } else {

					// }
					this.quest = res.data.question
					this.subjectContent = this.quest.questions
					this.explain = res.data.question.explain
					// this.thisNum = res.data.sort
					this.thisNum += 1
				})
			},
			//上一题
			prevSubject() {
				if (this.thisNum == 1) {
					uni.showToast({
						title: '已经是第一题了',
						icon: 'none'
					})
					return
				}
				this.skillShow = false
				this.error = ''
				this.correct = ''
				this.multipleAnswer = ''
				this.isTrue = true
				this.isAnswer = true
				let params = {
					subject: this.subjectType,
					vip: '0',
					now_question_id: this.quest.id,
				}
				randomPrev(params).then(res => {
					this.quest = res.data.question
					this.subjectContent = this.quest.questions
					this.explain = res.data.question.explain
					// this.thisNum = res.data.sort
					this.thisNum += 1
				})
			},
			//重新开始
			restart() {
				let params = {
					subject: this.subjectType,
					vip: this.userInfo.vip
				}
				deleteRecord(params).then(res => {
					if (res.code == 1) {
						this.is_restart = '1'
						this.getSubject()
					}

				})
			},
			//获取题目
			getSubject() {
				let params = {
					subject: this.subjectType,
					vip: 0,
					is_restart: 1,
				}
				let that = this
				random(params).then(res => {
					if (res.code == 1) {
						if (res.data.sort > 1) {
							wx.showModal({
								title: '',
								cancelText: '重新开始',
								confirmText: '继续练习',
								content: `上次做到第${res.data.sort}题，是否继续？`,
								success(res) {
									if (res.confirm) {

									} else if (res.cancel) {
										console.log('用户点击取消')
										that.restart()
									}
								}
							})
						}
						this.isAnswer = true
						this.quest = res.data.question
						this.subjectContent = this.quest.questions
						this.explain = res.data.question.explain
						this.thisNum = res.data.sort + 1
						this.count = res.data.count
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		background-color: #f2f2f2;
		padding: 26rpx;
		padding-bottom: 150rpx;

		.confirm {
			font-size: 28rpx;
			color: #fff;
			background-color: #4394ED;
			position: fixed;
			right: 40rpx;
			bottom: 20%;
			border-radius: 100%;
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}

		.subject {
			font-size: 34rpx;
			color: #666;
			line-height: 50rpx;

			.type {
				color: #597CD6;
				border: 1px solid #597CD6;
				font-size: 34rpx;
				border-radius: 10rpx;
				padding: 2rpx 10rpx;
				margin-right: 10rpx;
			}
		}

		.images {
			margin-top: 40rpx;
			text-align: center;
			width: 100%;

			.img {
				max-width: 80%;
			}
		}

		.detail {
			margin-top: 40rpx;

			.line {
				display: flex;
				font-size: 28rpx;
				color: #C6362E;
				align-items: center;

				.left {
					border-bottom: 1px dotted #C6362E;
					height: 1px;
					flex: 1;
				}
			}

			.standard {
				color: #5F5F5F;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}

		.answer {

			font-size: 30rpx;
			color: #000;

			.item {
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;

				.round {
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;
					border: 1px solid #333;
					display: block;
					text-align: center;
					line-height: 45rpx;
					font-size: 32rpx;
					margin-right: 10rpx;
				}

				.answer-text {
					flex: 1;
					font-size: 34rpx;
				}

				.selected {
					background-color: #333;
					color: #fff;
				}
			}

			.true {


				.round {
					background-color: #4394ED;
					color: #fff;
					border: 1px solid #4394ED;
				}
			}

			.false {


				.round {
					background-color: #D22E25;
					color: #fff;
					border: 1px solid #D22E25;
				}
			}
		}

		.other {
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			.item {
				margin-right: 20rpx;
				color: #646464;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				border: 1px solid #646464;
			}
		}

		.skill {
			margin-top: 40rpx;
			color: #333;
			line-height: 40rpx;
			font-size: 34rpx;
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 20rpx 10rpx;
			color: #5A5A5A;
			max-width: 500px;

			.item {
				flex: 1;
			}

			.number {
				flex: 1;

				.round {
					border: 1px solid #ccc;
					padding: 0 6rpx;
					margin-right: 4rpx;
				}
			}
		}
	}

	@media (min-width:500px) {
		.main {
			.bottom {
				margin-left: -250px;
				left: 50%;

			}
		}

	}
</style>